<template>
    <div class="container">
        <!-- 查询显示区域 -->
        <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="webcam" class="tab-panel">
                <div class="card-panel white-pannel">
                     TODO: 数据类别查询参数
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="speaker phone" force-render>
                <div class="card-panel white-pannel">
                     TODO: 数据类别查询参数
                </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="microphone">
                <div class="card-panel white-pannel">
                     TODO: 数据类别查询参数
                </div>
            </a-tab-pane>
        </a-tabs>

        <!-- 内容显示区域：表格数据显示方式，数据导出等 -->
        <a-row class="condition-pannel white-pannel">
            <a-col :span="6">
                <a-button type="primary">
                    产品对比
                </a-button>
            </a-col>
            <a-col :span="6">
                <a-button type="primary">
                    数据文件导出
                </a-button>
            </a-col>
            <a-col :span="6">
                <a-button type="primary">
                    其他条件
                </a-button>
            </a-col>
            <a-col :span="6">
                <a-button type="primary">
                    查询
                </a-button>
            </a-col>
        </a-row>
        <!-- 内容显示区域（表格） -->
        <a-table :columns="columns" :data-source="data" class="white-pannel table-content" :pagination="pagination">
            <a slot="name" slot-scope="text">{{ text }}</a>
            <span slot="customName"><a-icon type="smile-o" /> 产品名</span>

            <!-- 产品排名 -->
            <span slot="customNumber"><a-icon type="smile-o" /> 排名（Number）</span>
            <span slot="number" slot-scope="text">#{{text}}</span>
            
            <!-- 产品缩略图 -->
            <img
                slot="img"
                slot-scope="img"
                alt="example"
                :src="img"
                class="grid-image"
            />
            <span slot="productImage"> <a-icon type="smile-o"/> 产品缩略图 </span>

            <!-- 产品价格 -->
            <span slot="customPrice"> <a-icon type="smile-o" /> 产品价格 </span>
            <span slot="price" slot-scope="text">{{text}}</span>
            
            <!-- 产品销量走向图 -->
            <span slot="customVolume"><a-icon type="smile-o"/>产品销量走向图</span>
            <div slot="volume" slot-scope="data" class="graph_cell">
                <VolumeGraph :x_axis_data="data.x_data" :y_axis_data="data.y_data"/>
            </div>
            <!-- 操作 -->
            <span slot="action">
                <a>查看详情</a>
                <a-divider type="vertical" />
                <a>导出当前产品数据</a>
                <a-divider type="vertical" />
                <a class="ant-dropdown-link"> 更多操作<a-icon type="down" /> </a>
            </span>
        </a-table>
    </div>
</template>
<script>
import VolumeGraph from "@/components/echart/volume-graph.vue";
const columns = [
    // 序号
    {
        dataIndex: 'key',
        key: 'number',
        slots: {title: 'customNumber'},
        scopedSlots:{customRender: 'number'},
        align: "center"
    },
    // 图片
    {
        dataIndex: 'img',
        key: 'img',
        slots: {title: 'productImage'},
        scopedSlots: {customRender: 'img'}
    },

    // 产品名
  {
    dataIndex: 'name',
    key: 'name',
    slots: { title: 'customName' },
    scopedSlots: { customRender: 'name' },
  },
    // 产品价格
    {
        dataIndex: 'price',
        key: 'price',
        slots: {title: 'customPrice'},
        scopedSlots: {customRender: 'price'}
    },
    // 产品销量走向图
    {
        dataIndex: 'volume',
        key: 'volume',
        slots: {title: 'customVolume'},
        scopedSlots: {customRender: 'volume'},
        align: "center",
    },
    // 操作
    {
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
    },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    img: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
    price: 87.87,
    volume: {
        x_data: [1,2,3,4,5],
        y_data: [200, 400, 500, 600, 450, 550]
    }
  },
  {
    key: '2',
    name: 'John Brown',
    img: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
    price: 87.87,
    volume: {
        x_data: [1,2,3,4,5],
        y_data: [200, 400, 500, 600, 450, 550]
    }
  },
  {
    key: '3',
    name: 'John Brown',
    img: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
    price: 87.87,
    volume: {
        x_data: [1,2,3,4,5],
        y_data: [200, 400, 500, 600, 450, 550]
    }
  },
  {
    key: '4',
    name: 'John Brown',
    img: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
    price: 87.87,
    volume: {
        x_data: [1,2,3,4,5],
        y_data: [200, 400, 500, 600, 450, 550]
    }
  },
  {
    key: '5',
    name: 'John Brown',
    img: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
    price: 87.87,
    volume: {
        x_data: [1,2,3,4,5],
        y_data: [200, 400, 500, 600, 450, 550]
    }
  },
  {
    key: '6',
    name: 'John Brown',
    img: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
    price: 87.87,
    volume: {
        x_data: [1,2,3,4,5],
        y_data: [200, 400, 500, 600, 450, 550]
    }
  },
  {
    key: '7',
    name: 'John Brown',
    img: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
    price: 87.87,
    volume: {
        x_data: [1,2,3,4,5],
        y_data: [200, 400, 500, 600, 450, 550]
    }
  },
  {
    key: '8',
    name: 'John Brown',
    img: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
    price: 87.87,
    volume: {
        x_data: [1,2,3,4,5],
        y_data: [200, 400, 500, 600, 450, 550]
    }
  },

];

export default {
    components: { VolumeGraph },
    data() {
        return {
            data,
            columns,
            pagination: {
                position: "bottom"
            }
        };
    },
    methods: {
        callback(key) {
            console.log(key);
        }
    },
    
}
</script>
<style lang="less" scoped>
.container{
    margin: 30px 50px;
}

.card-panel{
    height: 200px;
    width: 100%;
    margin-bottom: 20px;
    padding: 0;
}

.white-pannel{
    background-color: white;
}

.condition-pannel{
    height: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.grid-image{
    width: 100px;
    height: 80px;
}

.tabel-content{
    margin-bottom: 50px;
    text-align: center;
}

.tab-panel{
    padding: 0 !important;
    margin: 0 !important;
}

.graph_cell{
    width: 200px;
    height: 80px;
}
</style>